import { NavBar, TabBar, Button } from "antd-mobile";
import React, { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import Xqlist from "../../components/Xqlist";
import { addche, delche } from "../../store/TranList";
import { Form, Input, Stepper, Switch } from "antd-mobile";
import { Mask, Space } from "antd-mobile";
import axios from "../../utils/request";
function Xq() {
  const navigate = useNavigate()
  const [form] = Form.useForm();
  const { state } = useLocation();
  // console.log(state);
  const dispatch = useDispatch();
  // 仓库里获取的数据
  const list = useSelector((state) => state.mylist.chelist);
  // console.log(list)
  // 遮罩层
  const [visible, setVisible] = useState(false);

  const onFinish = (values) => {
    console.log(values);
    setVisible(false);
    dispatch(addche(values));
  };

  const gosf = () => {
    const input = document.createElement("input");
    input.type = "file";
    input.click();

    input.onchange = async () => {
      const file = input.files[0];
      const formData = new FormData();
      formData.append("file", file, file.name);
      const res = await axios.post("/orc/upload/image", formData);
      console.log(res);
      form.setFieldsValue(res.data.data);
    };
  };

  const setpay = async()=>{
    const id = new Date().getTime()
    const res = await axios.get('/pay',{params:{
      title:"支付",
      id:id,
      price:200
    }})
    console.log(res)
    window.open(res.data.data)

    const timer = setInterval(async()=>{
      const res = await axios.get('/query',{params:{id:id}})
      console.log(res)
      if(res.data.code == 200){
        clearInterval(timer)
        navigate('/chengg')
        // console.log(res.data.message)
      }
    },1000)
  }
  return (
    <div>
      <NavBar>
        {state.start}——{state.end}
      </NavBar>
      <dl style={{ width: "100%", height: "90px", borderBottom: "1px solid" }}>
        <dt>
          <div>
            {state.start} —— {state.end}
          </div>
          <div>{state.isSeat ? "有票" : "无票"}</div>
          <div>{state.isSpeed ? "高铁" : "非高铁"}</div>
        </dt>
        <dd style={{ float: "left" }}>
          ￥：
          <span style={{ color: "red", fontWeight: "900" }}>
            {state.tick.vip}
          </span>
        </dd>
      </dl>
      <h3>乘车人</h3>
      <Button onClick={() => setVisible(true)}>添加</Button>
      <div>
        {list.map((v, i) => {
          return (
            <Xqlist
              v={v}
              key={i}
              onClick={() => {
                dispatch(delche(v.id));
                console.log(dispatch(delche(v.id)));
              }}
            ></Xqlist>
          );
        })}
      </div>
      <Mask visible={visible} onMaskClick={() => setVisible(false)}>
        <Form
          form={form}
          onFinish={onFinish}
          layout="horizontal"
          footer={
            <Button block type="submit" color="primary" size="large">
              提交
            </Button>
          }
        >
          <Form.Item name="name" label="姓名">
            <Input />
          </Form.Item>
          <Form.Item name="tel" label="手机号">
            <Input />
          </Form.Item>
          <Form.Item name="code" label="身份证">
            <Input />
          </Form.Item>
        </Form>

        <Button
          block
          type="submit"
          color="danger"
          size="large"
          onClick={() => {
            gosf();
          }}
        >
          orc身份证识别
        </Button>
      </Mask>
      <Button block color="primary" size="large"
      onClick={()=>{
        setpay()
      }}
      >
        下单
      </Button>
    </div>
  );
}

export default Xq;
